.App {
  text-align: left;
}

.App-header{
  background-color: #1982cc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@keyframes rotateX{
  0%{transform:rotateX(0deg);}
  100%{transform:rotateX(360deg);}
}
@keyframes rotateY{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}
@keyframes rotateZ{
  from{transform:rotateZ(0deg);}
  to{transform:rotateZ(360deg);}
}

@keyframes fillLine{
  0%{stroke-dashoffset:100%;}
  100%{stroke-dashoffset:0;}
}

@keyframes light{
  0%{
    fill:black;
    stroke: gold;
    stroke-opacity: 0;
    stroke-width: 4;
  }
  100%{
    fill:red;
    stroke: gold;
    stroke-opacity: 0.3;
    stroke-width: 4;
  }
}

.App-logo{
  background-color: #1982cc;
}

.App-logo:hover{
  cursor: pointer;
}

.App-logo .T .in-line{
  border: 5px dashed red;
  stroke: blue;
  stroke-dasharray: 100, 1000;
  stroke-dashoffset: 100;
  stroke-width: 12;
  stroke-linecap: round;
}

.App-logo .T .out-line{
  border: 5px dashed red;
  stroke: skyblue;
  stroke-width: 16;
  stroke-linecap: round;
}

.App-logo:hover .T .in-line{
  animation-name: fillLine;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
}

.App-logo:hover .cross{
  transform-origin: center;
  transform-box: fill-box;
  animation: rotateZ 1s linear infinite;
}

.App-logo:hover .txt{
  animation: light 1s linear 0.5s 1;
  animation-fill-mode: forwards;
}

.App .body{
  min-height: 100vh;
  background-color: #1982cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.App .body .hlink{
  border: none;
  background: none;
  font-size: xx-large;
  font-weight: bold;
}
.App .body .hlink:hover{
  cursor: pointer;
  color: gold;
}

.App .body .book-list{
  display: flex;
  flex-direction: row;
}

.App .body .book-list .book{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.App .body .book-list .book img{
  width: 125px;
  margin: 5px;
}

.App .body .book-list .book button{
  border: 1px dashed black;
  border-radius: 10px;
  background: none;
  font-size: x-large;
  font-weight: bold;
  margin: 5px;
}

.App .body .book-list .book button:hover{
  cursor: pointer;
  color: gold;
}

.div-flex-column{
  display: flex;
  flex-direction: column;
}


